<template>
  <div class="box">
    <header class="header">
      <van-nav-bar :title="proname" left-arrow @click-left="backOne">
        <template #right>
          <van-popover
            v-model="showPopover"
            theme="dark"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="24" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </header>
    <div class="content">
        <!-- 轮播图 -->
        <div class="detail-swipe">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) of banners" :key="index" @click="priviewImg(index)">
              <van-image :src="item" fit="cover"/>
            </van-swipe-item>
          </van-swipe>
          <div class="vdo" @click="show = true">1'20</div>
          <van-popup v-model="show">
            <video
              id="vdo"
              autoplay
              width="375"
              controls
              src="https://jvod.300hu.com/vod/product/2c734922-a63d-4c92-b965-0d70d4d65f6b/75f44d6c9d4d4673ab586585d26ca771.mp4"></video>
          </van-popup>
        </div>
      <p>{{originprice}}</p>
      <van-badge :content="brand" />
      <van-badge :content="category"/>
      <h3>{{proname}}</h3>
      <van-goods-action v-if="issale">
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" @click="toCart" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" @click="addCartFn" text="加入购物车" />
        <van-goods-action-button type="danger" @click="toCart" text="立即购买" />
      </van-goods-action>
      <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" @click="toCart" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="danger" :disabled="true" text="商品已下架" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
// @ 代表 src 的目录
import { getProDetail } from '@/api/detail'
import Vue from 'vue'
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  Badge,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  ImagePreview,
  Popup,
  NavBar,
  Popover,
  Icon,
  ShareSheet,
  Toast
} from 'vant'
import { addCart } from '@/api/cart'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Badge)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(ImagePreview)
Vue.use(Popup)
Vue.use(NavBar)
Vue.use(Popover)
Vue.use(Icon)
Vue.use(ShareSheet)
Vue.use(Toast)
export default {
  watch: {
    show (newVal) {
      const vdo = document.getElementById('vdo')
      if (!newVal) {
        vdo.pause()
      }
    }
  },
  methods: {
    onSelect (actions) {
      switch (actions.index) {
        case '1' :
          this.$router.push('/home')
          break
        case '2' :
          this.$router.push('/kind')
          break
        case '3' :
          this.$router.push('/cart')
          break
        case '4' :
          this.$router.push('/user')
          break
        case '5' :
          this.showShare = true
          console.log(1)
          break
      }
    },
    priviewImg (index) {
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    backOne () {
      this.$router.back()
    },
    addCartFn () {
      if (localStorage.getItem('isLogin') === 'true') {
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          Toast('加入购物车成功')
        })
      } else {
        this.$router.push('/login')
      }
    },
    toCart () {
      this.$router.push('/cart')
    }
  },
  data () {
    return {
      proid: '',
      banners: [], // 轮播图
      brand: '', // 品牌
      category: '', // 分类
      desc: '', // 详情
      discount: 0, // 折扣
      isrecommend: 1, // 是否被推荐
      issale: 0, // 是不是上架状态
      isseckill: 0, // 是否被秒杀
      originprice: 0, // 商品原价
      proname: '', // 产品名称
      sales: 0, // 销量
      stock: 0, // 库存
      show: false, // 视频显示 false
      showPopover: false,
      actions: [{ index: '1', text: '首页', icon: 'fire-o' }, { index: '2', text: '分类', icon: 'qr' }, { index: '3', text: '购物车', icon: 'cart-circle-o' }, { index: '4', text: '我的京东', icon: 'user-circle-o' }, { index: '5', text: '分享', icon: 'share-o' }],
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  async mounted () {
    this.proid = this.$route.params.proid
    const res = await getProDetail(this.proid)
    console.log(res.data.data)
    // { banners: ['img,img,img']}
    this.banners = res.data.data.banners[0].split(',')
    this.brand = res.data.data.brand
    this.category = res.data.data.category
    this.desc = res.data.data.desc
    this.discount = res.data.data.discount
    this.isrecommend = res.data.data.isrecommend
    this.issale = res.data.data.issale
    this.isseckill = res.data.data.isseckill
    this.originprice = res.data.data.originprice
    this.proname = res.data.data.proname
    this.sales = res.data.data.sales
    this.stock = res.data.data.stock
  }
}
</script>

<style lang="stylus" scoped>
.my-swipe
  height 3rem
  img
    width 100%
    height 3rem
.detail-swipe
  position relative
  height 3rem
  overflow hidden
  .vdo
    position absolute
    bottom 20px
    left 50%
    transform translateX(-50%)
    width 80px
    height 30px
    background  url('') no-repeat
    background-size contain
    display flex
    justify-content center
    align-items center
</style>
